<template>
  <div class="home">
    <div class="row" >
      <span style="color: black;font-size: 22px">
       Note that this website is for ease of review. In addition, we provide example files and also support uploading CircRNA transcript sequence files from local
      </span>
      <span style="color: black;font-size: 22px">
        for analysis. For faster results, please do not upload more than three CircRNA transcript sequences.
      </span>
    </div>
    <br>
    <div class="row">
      <span style="color: black;font-size: 22px">
        The CICADA sever accepts CircRNA transcript sequences as input, and outputs assessed protein-coding potential of the transcripts.
      </span>
      <div style="height: 20px"></div>
      <el-form
        :model="from"
        label-position="left"
      >
        <el-form-item>
          <el-radio-group v-model="radio" class="ml-4">
            <el-radio label="input" size="large">
              <h5 style="margin-top: 10px"><b>Paste your data:</b></h5>
            </el-radio>
            <el-input :disabled="radio !='input'" type="textarea" rows="6" v-model="from.input"></el-input>
            <el-radio label="file" size="large">
              <h5 style="margin-top: 10px"><b>Upload a file:</b></h5>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-upload
            :disabled="radio != 'file'"
            ref="uploadRef"
            class="upload-demo"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="fileChange"
          >
            <template #trigger>
              <el-button type="primary">select file</el-button>
            </template>
            <template #tip>
              <!-- 提示上传文件类型-->
              <div class="el-upload__tip text-red" v-if="uploadRef.raw != null">
                upload success
              </div>
              <div style="color: red" class="el-upload__tip " v-if="radio != 'file'">
                Please select Upload a file
              </div>

            </template>
            <template #file>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="Top rank ORF">
          <el-select v-model="from.topnumber">
            <el-option
             v-for="item in option"
             :label="item"
             :value="item"
            >
            </el-option>
           <el-option
             label="all"
             value="null"
           ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Whether amino acid sequence is required">
          <el-radio-group v-model="from.sequence">
            <el-radio label="Yes"></el-radio>
            <el-radio label="No"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button style="background: rgb(102,199,238);color: black" @click="example">Example</el-button>
          <el-button style="background: rgb(57,114,249);color: white" @click="submit">Analyze</el-button>
          <el-button style="background: rgb(110,117,125);color: white" @click="rest">Rest</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { reactive, ref, toRefs} from "vue";
import {useRouter} from "vue-router/dist/vue-router";
import {ElMessage} from "element-plus";
import axios from "axios";


export default {
  name: 'HomeView',
  components: {
  },
  setup(){
    const router = useRouter()
    const uploadRef = ref("")
    const data = reactive({
      from:{
        input:null,
        sequence:null,
        topnumber:null,
        file:null
      }, //表单
      radio:"input",
      option:[5,10,20]
    })

    function fileChange(file){
      uploadRef.value = file
      console.log(uploadRef.value.raw)
    }

    /**
     * 上传文件或把文本上传为文件     *
     * 返回fileName
     *
     */
    function submit(){
      if (data.radio === "file"){ //判断是否为上传文件
        if (uploadRef.value.name === null){
         ElMessage.warning("Please upload file")
        }else {
          const fromData = new FormData();
          fromData.append('file',uploadRef.value.raw)
          fromData.append("sequence",data.from.sequence)
          fromData.append("topnumber",data.from.topnumber)
          axios({
            method: "post",
            url: "http://121.196.54.69:8001/CNIT/uploadFile",
            data:fromData
          }).then((res)=>{
            router.push({
              name:"HomeDetail",
              query:{
                fileName:res.data
              }
            })
          })
        }
      }else {
        if (data.from.input === null){
          ElMessage.warning("Please input data")
        }else {
          axios({
            method:"get",
            url:"http://121.196.54.69:8001/CNIT/input",
            params:{
              sequence:data.from.sequence,
              input:data.from.input,
              topnumber:data.from.topnumber
            }
          }).then((res)=>{
            router.push({
              name:"HomeDetail",
              query:{
                fileName:res.data
              }
            })
          })
        }
      }

    }

    function rest(){
      data.from = {}
      data.radio = "input"
    }
    function example(){
      data.from.input = ">cir_2336127\n" +
        "GTGATCTGTGTCCACGATGTCTCATCCATCTACCGAGTCCCCTTGTTGTTAGAGGAGCAAGGGGTTGTAGATTATTTTCTTCGAAGACTTGACCTTCCTATTGAGAGGCAGCCAAGAAAAATGCTGATGAAATGGAAAGAGATGGCTGACAGGTTTGCCTGCAATGAGGAGCTGGGAGTGCTAGCCTCCTTTACTCTTTTGTAGGGCTGGTGAAGCCGACTCTAGCCCTAGCACTTTTGTACTTTTGCACTTCTGCCATCCACTCATTAGAAGAGCCTTTGTAGTAAGAGATGTTCAGAAAGGATCTTAGCTGTCACGTAGCTGTGGCACAGATGAGGAGATCCTGATAGGGCCAGGCCAGGTGCCGGGCCTCCAGACAATGAGTTCGGGTTATGTCTTAACACGCTTGTCTCTTACCAACTAGATCAGTGCAGATGGGCGTCCTGGTGGCAGCGGGTGAGTGTGCATATCCAAAGCCCACACGAATGGCTGACAGTGGCTGGAGCACTCCTGGGTACCACTCCAGAGTTCTGAGCTGTGTTTGGGAATGTGTCTCACCCCACACCAGAAAGGGATCACATTAGGACGGGGATGTGTTGCTGCCTACTCCACTACATCCTTTTAAGGCTCGGTGATGCTGTCACATTCCTTCAGAAATCTTCACTTCGTGTCTTAGAGCAATGGGCAGGCCTTATCTTAGTTGCAAGATCAATATGATGGCCTAGAAGCATTTGGAGAGGGCATACTCATTCCGTTGCTCTGTGAGAATCATTTTTCATTTCAACATTTTCCTTTCAGTCTTTGTCTGCTTACATATAGCTATCAGAATGGCAGTTTTATCATCCTTTTTCATAAAACATTATAAGCATTTTGCTCTGTTATTATATTTTACAATGAAAACTTTTAATGAGTGTGGACTTTTCTATTTTGTGAATGTCCCATAATTTGTTTGACACTTGCCTTCACCCCATTAATTCTTGTGAATTGTCTATGTCTGTTATTTTTTTTGGTCTTTGGTATGAAAAAAATTTTTTGTAGGCAAATTTGTGTGAGACGTTGAAACTCTTTGTAAGTTTCAAAACAAAAACAAAAAAAAAATTTTTCTTTACAAAGCCTGCCATGTTGATCTGAAAATTACTTCCTCTTTACTGGTCTGTACACAGAACTCAGATAATAGCTATTCCCGTTATATTCTTCCCAGGTGTGTTTTTGTTGTTTTTTGTGGGGGTTTTTTGAGGCAGGGTCTCACACTGTTGCCCAGGCTGTAGTGCAGTGGTGCAGTCAGCTCACTGTAACCTCCAACTCCTGGGCTCAAGATCCCCCCGCCTCAGCCTTTCAAAGTGCTGGGATTATAGGATTATGGGCGTGAGCTCATCCTGGCCAGACGTGGTTTTTTTTCCCTTGAAATAGCTATTTTGGTCTCATGATAGCGTGTACCTTCTGAGTAATTGGGTTTTTCTTGACGTTTATTTGATAGATATGATCGCTTGCTGGAGACCTGCTCTATTGCCCTTGTGGGCAAATACACGAAGTTCTCAGACTCCTATGCCTCTGTCATTAAGGCTCTGGAGCATTCTGCACTGGCCATCAACCACAAATTGGAAATCAAGTAGAGATGGGGTTTCACCATGTTTGCCAGGCTAGTCTCGAACTCCTGACCTCAAGTGATCCACCCGCCTCGGCCTTCCAAAGTGCTGGGATTATAGGTGTGAGCCACCACGCCCGGCTCATTCTATATCTTGTACATAGATTCTGCGGACTTGGAGCCCATCACCTCGCAAGAAGAGCCCGTGCGCTACCACGAAGCTTGGCAGAAGCTCTGTAGTGCTCA\n"
      data.from.sequence = "Yes"
      data.from.topnumber = 5

    }
    return {
      ...toRefs(data),
      uploadRef,
      fileChange,
      submit,
      example,
      rest
    }
  }
}
</script>

<style scoped>
.row{
  text-align: left;
}
/deep/.el-textarea__inner{
  width: 80vw;
}
.upload-demo{
  font-size: 20px;
}
/deep/.el-upload-list__item-file-name{
  float: right;
}
/deep/.text-red{
  color: #1e7e34;
}
</style>
